<template>
  <div>
    <el-input
      placeholder="请输入内容"
      v-model="search"
      class="input-with-select"
      @keyup.enter.native="requestSubList()"
    >
      <el-select v-model="search_type" slot="prepend" placeholder="请选择">
        <el-option label="用户名" value="username"></el-option>
      </el-select>
      <el-button slot="append" icon="el-icon-search" @click="requestSubList()"></el-button>
    </el-input>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column prop="username" label="用户名" width="200"></el-table-column>
      <el-table-column prop="keywords" label="订阅"></el-table-column>
    </el-table>

    <Pagination :total="total" @getCurrentData="pageChange" @getSizeData="pageSizeChange"/>
  </div>
</template>

<script>
import pagination from "@/components/pagination";
import { requestAllSubList } from "@/api/index";

export default {
  name: "Subscribe",
  components: {
    Pagination: pagination
  },

  data() {
    return {
      tableData: [],
      search_type: "username",
      search: "",
      total: 0,
      page: 1,
      page_size: 20
    };
  },

  methods: {
    pageChange: function(val) {
      let vue = this;
      vue.page = val;
      vue.requestSubList();
    },
    pageSizeChange: function(val) {
      this.page_size = val;
      this.requestSubList();
    },
    requestSubList: function() {
      let vue = this;
      let send_data = {
        search: vue.search,
        search_type: vue.search_type,
        page: vue.page,
        size: vue.page_size
      };
      requestAllSubList(send_data).then(data => {
        vue.tableData = data.result.SubList;
        vue.total = data.result.totalElements;
      });
    }
  },

  created: function() {
    let vue = this;
    vue.requestSubList();
  }
};
</script>

<style>
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-button {
  width: 100px;
}

.el-table {
  margin-top: 20px;
}
</style>